<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core" 
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:p="http://primefaces.org/ui"
                template="/template/plantilla.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    <ui:define name="title"><h:outputText value="Sinetcom - Tickets"></h:outputText></ui:define>
    <ui:define name="menu"><ui:include src="/menu/menu.xhtml" /></ui:define>
    <ui:define name="content">
        <f:view contentType="text/html">
            <h:form id="form" enctype="multipart/form-data">
                <p:poll interval="10" listener="#{ticketsPorPrioridad.recargarTablaTickets()}" process="@this" update="tabla" />
<!--                <p:dialog widgetVar="statusDialog" modal="true" draggable="false" closable="false" resizable="false" showHeader="false">
                    <p:graphicImage library="images" name="ajax_loader.gif" />
                </p:dialog>-->
                <f:facet name="header">
                    Tickets Por Prioridades
                </f:facet>                
                <p:tabView id="tabview" activeIndex="#{ticketsPorPrioridad.tabSeleccionadoIndex}">
                    <p:ajax event="tabChange" listener="#{ticketsPorPrioridad.cambioDeTab}" update=":form:tabla, :form:articulos"></p:ajax>
                    <c:forEach items="#{ticketsPorPrioridad.prioridadesTickets}" var="prioridad">
                        <p:tab title="#{prioridad.nombre}" id="tab-#{prioridad.codigo}">
                        </p:tab>
                    </c:forEach>
                </p:tabView>
                <div style="overflow: auto">
                    <p:dataTable id="tabla" var="ticket" value="#{ticketsPorPrioridad.tickets}" selectionMode="single" rows="10" paginator="true" selection="#{ticketsPorPrioridad.ticketSeleccionado}"  rowKey="#{ticket.ticketNumber}" resizableColumns="true" liveResize="true" >
                        <f:facet name="header">
                            #{ticketsPorPrioridad.tabSeleccionado}
                        </f:facet>
                        <p:ajax event="rowSelect" immediate="true" listener="#{ticketsPorPrioridad.registroSeleccionado}" onstart="statusDialog.show()" onsuccess="statusDialog.hide()" update=":form:articulos, @this"></p:ajax>
                        <p:ajax event="rowUnselect" immediate="true" listener="#{ticketsPorPrioridad.registroDeseleccionado}" update=":form:articulos, @this"></p:ajax>
                        <p:column headerText="Número de Ticket">
                            <h:outputText value="#{ticket.ticketNumber}"></h:outputText>
                        </p:column>
                        <p:column headerText="Asunto">
                            <h:outputText value="#{ticket.titulo}"></h:outputText>
                        </p:column>
                        <p:column headerText="Prioridad">
                            <h:outputText value="#{ticket.prioridadTicketcodigo.nombre}"></h:outputText>
                        </p:column>
                        <p:column headerText="Empresa">
                            <h:outputText value="#{ticket.clienteEmpresaid.nombreComercial}"></h:outputText>
                        </p:column>
                        <p:column headerText="Equipo">
                            <h:outputText value="#{ticket.itemProductonumeroSerial.numeroSerial} - #{ticket.itemProductonumeroSerial.modeloProductoid.lineaDeProductoid.nombre} #{ticket.itemProductonumeroSerial.modeloProductoid.modelo}"></h:outputText>
                        </p:column>
<!--                        <p:column headerText="Número de Ticket" width="280">
                            <h:outputText value="#{ticket.ticketNumber}"></h:outputText>
                        </p:column>
                        <p:column headerText="Estado" width="280">
                            <h:outputText value="#{ticket.estadoTicketcodigo.nombre}"></h:outputText>
                        </p:column>
                        <p:column headerText="Fecha de Creación" width="280">
                            <h:outputText value="#{ticketsPorPrioridad.formatoCortoDeFechaYHora(ticket.fechaDeCreacion)}"></h:outputText>
                        </p:column>
                        <p:column headerText="Fecha de U. Modificación" width="280">
                            <h:outputText value="#{ticketsPorPrioridad.formatoCortoDeFechaYHora(ticket.fechaDeModificacion)}"></h:outputText>
                        </p:column>
                        <p:column headerText="Asunto" width="280">
                            <h:outputText value="#{ticket.titulo}"></h:outputText>
                        </p:column>
                        <p:column headerText="Empresa" width="280">
                            <h:outputText value="#{ticket.clienteEmpresaid.nombreComercial}"></h:outputText>
                        </p:column>
                        <p:column headerText="Equipo" width="280">
                            <h:outputText value="#{ticket.itemProductonumeroSerial.numeroSerial} - #{ticket.itemProductonumeroSerial.modeloProductoid.lineaDeProductoid.nombre} #{ticket.itemProductonumeroSerial.modeloProductoid.modelo}"></h:outputText>
                        </p:column>
                        <p:column headerText="Servicio" width="280">
                            <h:outputText value="#{ticket.servicioTicketcodigo.nombre}"></h:outputText>
                        </p:column>
                        <p:column headerText="Cola" width="280">
                            <h:outputText value="#{ticket.colaid.nombre}"></h:outputText>
                        </p:column>
                        <p:column headerText="Creador" width="280">
                            <h:outputText value="#{ticket.usuarioidcreador.nombreCompleto}"></h:outputText>
                        </p:column>
                        <p:column headerText="Propietario" width="280">
                            <h:outputText value="Ing. #{ticket.usuarioidpropietario.nombreCompleto}"></h:outputText>
                        </p:column>-->
                        <f:facet name="footer">
                            <p:commandButton value="Cerrar Ticket" icon="ui-icon-circle-check" update=":form:cerrarT" disabled="#{ticketsPorPrioridad.desactivarCerrarTicket}" immediate="true" oncomplete="cerrarTicketDialog.show()"></p:commandButton>
                            <p:commandButton value="Poner en Pendiente" icon="ui-icon-clock" update=":form:tabla" disabled="#{ticketsPorPrioridad.desactivarPonerEnPendiente}" process="@this" immediate="true" ajax="false" actionListener="#{ticketsPorPrioridad.ponerEnPendiente}" ></p:commandButton>
                            <p:commandButton value="Re-abrir Caso" icon="ui-icon-refresh" update=":form:tabla" disabled="#{ticketsPorPrioridad.desactivarReAbrirCaso}" process="@this" immediate="true" ajax="false" actionListener="#{ticketsPorPrioridad.reAbrirCaso}"></p:commandButton>
                            <p:commandButton value="Asignar Ticket" icon="ui-icon-person" update=":form:asignarT" disabled="#{ticketsPorPrioridad.desactivarAsignarTicket}" immediate="true" oncomplete="asignarDialog.show()"></p:commandButton>
                            <p:commandButton value="Primer Contacto" icon="ui-icon-mail-closed" update=":form:tabla" disabled="#{ticketsPorPrioridad.desactivarPrimerContacto}" immediate="true" oncomplete="primerContactoDialog.show()"></p:commandButton>
                            <p:commandButton value="Subir Hoja S." icon="ui-icon-document" update="@form" disabled="#{ticketsPorPrioridad.desactivarHojaDeServicio}" immediate="true" oncomplete="hojaDeServicio.show()"></p:commandButton>
                            <p:commandButton value="Descargar Hoja S." icon="ui-icon-arrowthickstop-1-s" ajax="false" disabled="#{ticketsPorPrioridad.desactivarDescargarHojaDeServicio}" immediate="true" onclick="PrimeFaces.monitorDownload(start, stop);">
                                <p:fileDownload value="#{ticketsPorPrioridad.archivoPorDescargar}"></p:fileDownload>
                            </p:commandButton>
                            <p:commandButton value="Ver Detalles" icon="ui-icon-search" process="tabla" update=":form:ticketDetail" disabled="#{empty ticketsPorPrioridad.ticketSeleccionado}" oncomplete="PF('ticketDialog').show()"></p:commandButton>
                        </f:facet>
                    </p:dataTable>
                    <p:dialog header="Detalles del Ticket" widgetVar="ticketDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false">
                        <p:outputPanel id="ticketDetail" style="text-align:center;">
                            <p:panelGrid id="detalles" columns="2" rendered="#{not empty ticketsPorPrioridad.ticketSeleccionado}">
                                    <p:outputLabel value="Número de Ticket:"/>
                                    <h:outputText value="#{ticketsPorPrioridad.ticketSeleccionado.ticketNumber}"></h:outputText>
                                    <p:outputLabel value="Prioridad:" />
                                    <h:outputText value="#{ticketsPorPrioridad.ticketSeleccionado.prioridadTicketcodigo.nombre}"></h:outputText>
                                    <p:outputLabel value="Fecha de Creación:" />
                                    <h:outputText value="#{ticketsPorPrioridad.formatoCortoDeFechaYHora(ticketsPorPrioridad.ticketSeleccionado.fechaDeCreacion)}"></h:outputText>
                                    <p:outputLabel value="Fecha de Última Modificación:" />
                                    <h:outputText value="#{ticketsPorPrioridad.formatoCortoDeFechaYHora(ticketsPorPrioridad.ticketSeleccionado.fechaDeModificacion)}"></h:outputText>
                                    <p:outputLabel value="Asunto:" />
                                    <h:outputText value="#{ticketsPorPrioridad.ticketSeleccionado.titulo}"></h:outputText>
                                    <p:outputLabel value="Empresa:" />
                                    <h:outputText value="#{ticketsPorPrioridad.ticketSeleccionado.clienteEmpresaid.nombreComercial}"></h:outputText>
                                    <p:outputLabel value="Equipo:" />
                                    <h:outputText value="#{ticketsPorPrioridad.ticketSeleccionado.itemProductonumeroSerial.numeroSerial} - #{ticketsPorPrioridad.ticketSeleccionado.itemProductonumeroSerial.modeloProductoid.lineaDeProductoid.nombre} #{ticketsPorPrioridad.ticketSeleccionado.itemProductonumeroSerial.modeloProductoid.modelo}"></h:outputText>
                                    <p:outputLabel value="Servicio:" />
                                    <h:outputText value="#{ticketsPorPrioridad.ticketSeleccionado.servicioTicketcodigo.nombre}"></h:outputText>
                                    <p:outputLabel value="Cola:" />
                                    <h:outputText value="#{ticketsPorPrioridad.ticketSeleccionado.colaid.nombre}"></h:outputText>
                                    <p:outputLabel value="Creador:" />
                                    <h:outputText value="#{ticketsPorPrioridad.ticketSeleccionado.usuarioidcreador.nombreCompleto}"></h:outputText>
                                    <p:outputLabel value="Propietario:" />
                                    <h:outputText value="Ing. #{ticketsPorPrioridad.ticketSeleccionado.usuarioidpropietario.nombreCompleto}"></h:outputText>
                                </p:panelGrid>
                        </p:outputPanel>
                    </p:dialog>
                </div>
                <p:dialog header="Asignar Ticket a Ingeniero" widgetVar="asignarDialog" modal="true" showEffect="fade" hideEffect="fade">
                    <p:panel id="asignarT">
                        <p:panelGrid columns="2" columnClasses="label,value">
                            <h:outputText value="Seleccione un ingeniero:"></h:outputText>
                            <p:selectOneMenu value="#{ticketsPorPrioridad.ticketSeleccionado.usuarioidpropietario}" required="true" requiredMessage="Seleccione un ingeniero!" converter="#{usuarioConverter}">
                                <p:ajax event="change" update="@this"></p:ajax>
                                <f:selectItem itemLabel="--Seleccione una opción--" itemValue=""></f:selectItem>
                                <f:selectItems value="#{ticketsPorPrioridad.ingenieros}" var="ing" itemLabel="#{ing.nombre} #{ing.apellido}" itemValue="#{ing.id.toString()}"></f:selectItems>
                            </p:selectOneMenu> 
                        </p:panelGrid>
                        <f:facet name="footer">
                            <p:commandButton value="Asignar Ticket" process=":form:asignarT" update="@form" actionListener="#{ticketsPorPrioridad.asignarIngeniero}" onstart="statusDialog.show()" onsuccess="statusDialog.hide()"></p:commandButton>
                        </f:facet>
                    </p:panel>
                </p:dialog>
                <p:dialog header="Cerrar Ticket de Soporte" height="500" style="overflow: scroll;"  widgetVar="cerrarTicketDialog" modal="true" showEffect="fade" hideEffect="fade">
                    <p:panel id="cerrarT">
                        <h1><strong>Ingreso de Actividad</strong></h1>
                        <p:panelGrid columns="2" columnClasses="label,value">
                            <h:outputText value="Fecha Inicio de la actividad:"></h:outputText>
                            <p:calendar id="fechaInicio" required="true"  value="#{ticketsPorPrioridad.nuevaActividadEnSitio.fechaInicio}" maxdate="#{ticketsPorPrioridad.fechaActual}" mindate="#{ticketsPorPrioridad.ticketSeleccionado.fechaDeCreacion}" pattern="MM/dd/yyyy HH:mm" mode="popup"></p:calendar>
                            <h:outputText value="Fecha Fin de la actividad:"></h:outputText>
                            <p:calendar id="fechaFin" required="true"  value="#{ticketsPorPrioridad.nuevaActividadEnSitio.fechaFin}" maxdate="#{ticketsPorPrioridad.fechaActual}" mindate="#{ticketsPorPrioridad.ticketSeleccionado.fechaDeCreacion}" pattern="MM/dd/yyyy HH:mm" mode="popup"></p:calendar>
                            <h:outputText value="Horas de viaje:"></h:outputText>
                            <p:inputText id="horasViaje" validatorMessage="Ingrese solo enteros" value="#{ticketsPorPrioridad.nuevaActividadEnSitio.horasDeViaje}" >
                                <f:convertNumber integerOnly="true"></f:convertNumber>
                            </p:inputText>
                            <h:outputText value="Minutos de viaje:"></h:outputText>
                            <p:inputText id="minutosViaje" validatorMessage="Ingrese solo enteros" value="#{ticketsPorPrioridad.nuevaActividadEnSitio.minutosDeViaje}">
                                <f:convertNumber integerOnly="true"></f:convertNumber>
                            </p:inputText>
                        </p:panelGrid>
                        <br/>
                        <p:dataTable id="actividades" value="#{ticketsPorPrioridad.actividadesEnSitio}" var="actividad">
                            <f:facet name="header">
                                Detalle de Actividades
                            </f:facet>
                            <p:column headerText="Fecha Inicio">
                                #{ticketsPorPrioridad.formatoCortoDeFechaYHora(actividad.fechaInicio)}
                            </p:column>
                            <p:column headerText="Fecha Fin">
                                #{ticketsPorPrioridad.formatoCortoDeFechaYHora(actividad.fechaFin)}
                            </p:column>
                            <p:column headerText="Tiempo de Viaje">
                                #{actividad.horasDeViaje != null ? actividad.horasDeViaje : "0"} h / #{actividad.minutosDeViaje != null ? actividad.minutosDeViaje : "0"} m
                            </p:column>
                            <p:column headerText="Eliminar">
                                <p:commandButton icon="ui-icon-trash" update=":form:actividades" process="@this" actionListener="#{ticketsPorPrioridad.eliminarActividad}" onstart="statusDialog.show()" onsuccess="statusDialog.hide()">
                                    <f:attribute name="idActividad" value="#{actividad.id}"></f:attribute>
                                    <p:confirm header="Confirmación" message="¿Está seguro que desea eliminar esta actividad?" icon="ui-icon-alert"></p:confirm>
                                </p:commandButton>
                            </p:column>
                        </p:dataTable>
                        <hr/>
                        <p:commandButton value="Agregar Actividad" actionListener="#{ticketsPorPrioridad.agregarActividadEnSitio}" process=":form:cerrarT" update=":form:cerrarT"></p:commandButton>
                        <p:commandButton value="Limpiar" actionListener="#{ticketsPorPrioridad.enserarActividadEnSitio}" process="@this" update=":form:cerrarT"></p:commandButton>
                        <hr/>
                        <br/>
                        <p:panelGrid columns="2">
                            <h:outputLabel for="resuelto" value="Resuelto:"></h:outputLabel>
                            <p:selectOneRadio id="resuelto" value="#{ticketsPorPrioridad.resueltoConExito}">
                                <p:ajax event="change" update="@this"></p:ajax>
                                <f:selectItem itemLabel="Con éxito" itemValue="true"></f:selectItem>
                                <f:selectItem itemLabel="Sin éxito" itemValue="false"></f:selectItem>
                            </p:selectOneRadio>
                        </p:panelGrid>
                        <br/>
                        <hr/>
                        <p:commandButton value="Cerrar Caso" process="@this" update="@form" actionListener="#{ticketsPorPrioridad.cerrarCaso}">
                            <p:confirm header="Confirmación" message="¿Está seguro que desea cerrar este caso?" icon="ui-icon-alert"></p:confirm>
                        </p:commandButton>
                        <hr/>
                    </p:panel>
                </p:dialog>
                <p:dialog header="Ingresar fecha y hora de Primer Contacto" widgetVar="primerContactoDialog" modal="true" showEffect="fade" hideEffect="fade">
                    <p:panel id="primerC">
                        <p:panelGrid columns="2" columnClasses="label,value">
                            <h:outputText value="Ingrese la fecha y hora: "></h:outputText>
                            <p:calendar id="fechaPrimerC" required="true"  value="#{ticketsPorPrioridad.ticketSeleccionado.fechaDePrimerContacto}" maxdate="#{ticketsPorPrioridad.fechaActual}" mindate="#{ticketsPorPrioridad.ticketSeleccionado.fechaDeCreacion}" pattern="MM/dd/yyyy HH:mm" mode="popup"></p:calendar>
                        </p:panelGrid>
                        <f:facet name="footer">
                            <p:commandButton value="Ingresar" actionListener="#{ticketsPorPrioridad.ingresarPrimerContacto}" process=":form:primerC" update="@form">
                                <p:confirm header="ATENCIÓN" message="No se podrá modificar esta información más adelante, ¿desea continuar?"></p:confirm>
                            </p:commandButton>
                        </f:facet>
                    </p:panel>
                </p:dialog>
                <p:dialog header="Subir Hoja de Servicio" widgetVar="hojaDeServicio" modal="true" showEffect="fade" hideEffect="fade">
                    <p:panel id="hojaS">
                        <p:panelGrid columns="2" columnClasses="label,value">
                            <h:outputText value="Seleccione la hoja de Servicio"></h:outputText>
                            <p:fileUpload id="hoja" mode="advanced" sizeLimit="52428800" allowTypes="/(\.|\/)(pdf)$/" multiple="false" fileUploadListener="#{ticketsPorPrioridad.adjuntarArchivoHojaS}" ></p:fileUpload>
                        </p:panelGrid>
                        <f:facet name="footer">
                            <p:commandButton value="Guardar Hoja de Servicio" actionListener="#{ticketsPorPrioridad.guardarArchivoAdjuntoHojaS}" process="@this" update="@form">
                                <p:confirm header="ATENCIÓN" message="No se podrá modificar esta información más adelante, ¿desea continuar?"></p:confirm>
                            </p:commandButton>
                        </f:facet>
                    </p:panel>
                </p:dialog>
                <p:panel id="articulos" header="Notas" footer="Notas disponibles" style="margin-bottom: 20px;" >
                    <ui:repeat value="#{ticketsPorPrioridad.articulos}" var="articulo" rendered="#{ticketsPorPrioridad.articulos != null}">
                        <p:panel id="articulo" header="Nota ##{articulo.orden}">
                            <h:panelGrid columns="2" cellpadding="10">
                                <h:outputLabel>De: </h:outputLabel>
                                <h:outputText value="#{articulo.de.correoElectronico}"></h:outputText>
                                <h:outputLabel>Para: </h:outputLabel>
                                <h:outputText value="#{articulo.para.correoElectronico}"></h:outputText>
                                <h:outputLabel>Asunto: </h:outputLabel>
                                <h:outputText value="#{articulo.asunto}"></h:outputText>
                                <h:outputLabel>Mensaje: </h:outputLabel>
                                <h:outputText value="#{articulo.cuerpo}"></h:outputText>
                                <h:outputLabel>Fecha y Hora: </h:outputLabel>
                                <h:outputText value="#{ticketsPorPrioridad.formatoCortoDeFechaYHora(articulo.fechaDeCreacion)}"></h:outputText>
                                <h:outputLabel>Adjunto: </h:outputLabel>
                                <p:commandButton value="Descargar" ajax="false" icon="ui-icon-arrowstop-1-s" immediate="true" disabled="#{not(articulo.contenidoAdjunto != null)}" actionListener="#{ticketsPorPrioridad.descargarArchivoAdjunto}">
                                    <f:attribute value="#{articulo.id}" name="idArticulo"></f:attribute>
                                    <p:fileDownload value="#{ticketsPorPrioridad.archivoPorDescargar}"></p:fileDownload>
                                </p:commandButton>
                            </h:panelGrid>
                        </p:panel>
                    </ui:repeat>
                    <p:panel id="nuevoArticulo" header="Nueva Nota" rendered="#{ticketsPorPrioridad.articulos != null}">
                        <h:panelGrid columns="2" cellpadding="10">
                            <h:outputLabel>Asunto: </h:outputLabel>
                            <p:inputText id="asunto" value="#{ticketsPorPrioridad.articuloNuevo.asunto}"  required="true"></p:inputText>
                            <h:outputLabel>Mensaje: </h:outputLabel>
                            <p:inputTextarea id="cuerpo"  cols="40" rows="10" value="#{ticketsPorPrioridad.articuloNuevo.cuerpo}" required="true"></p:inputTextarea>
                            <h:outputLabel>Adjunto: </h:outputLabel>
                            <p:fileUpload id="archivo" mode="advanced" sizeLimit="52428800" allowTypes="/(\.|\/)(gif|jpe?g|png|pdf)$/" multiple="false" fileUploadListener="#{ticketsPorPrioridad.adjuntarArchivo}" ></p:fileUpload>
                        </h:panelGrid>
                        <f:facet name="footer">
                            <p:commandButton value="Agregar Nota" disabled="#{ticketsPorPrioridad.desactivarAgregarArticulo}" actionListener="#{ticketsPorPrioridad.crearNuevoArticulo}" update=":form:articulos"  process=":form:articulos" onstart="statusDialog.show()" onsuccess="statusDialog.hide()"></p:commandButton>
                        </f:facet>
                    </p:panel>
                </p:panel>
                <p:confirmDialog global="true">
                    <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check"/>
                    <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close"/>
                </p:confirmDialog>
                <script type="text/javascript">
                    function start() {
                        statusDialog.show();
                    }
                    function stop() {
                        statusDialog.hide();
                    }
                </script>
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>